<!--
 * @Author: taosong
 * @Date: 2022-09-19 16:40:06
 * @LastEditors: taosong
 * @LastEditTime: 2022-10-12 15:46:00
 * @Description: taosongs
-->
<template>
  <div
    class="bg-white dark:bg-zinc-800 w-full sticky z-10 top-0 left-0 duration-500"
  >
    <ul
      class="w-[800px] relative flex justify-center flex-wrap duration-300 overflow-x-auto px-[10px] py-1 text-xs text-zinc-600 overflow-hidden mx-auto"
      :class="[isOpenCategory ? 'h-[206px]' : 'h-[56px]']"
    >
      <div
        class="absolute right-1 bottom-1 p-1 z-20 rounded cursor-pointer duration-200 hover:bg-zinc-200 dark:hover:bg-zinc-900"
        @click="triggerCategoryClick"
      >
        <m-svg-icon
          :name="isOpenCategory ? 'fold' : 'unfold'"
          class="w-1 h-1"
          fillClass="fill-zinc-900 dark:fill-zinc-300"
        ></m-svg-icon>
      </div>
      <!-- item -->
      <li
        v-for="(item, index) of $store.getters.categorys"
        :key="item.id"
        @click="onCategoryClick(item)"
        :class="{
          'text-zinc-900 dark:text-zinc-300 bg-zinc-200 dark:bg-zinc-900':
            $store.getters.currentCategoryIndex === index
        }"
        class="px-1.5 py-0 z-10 duration-200 text-base dark:hover:text-zinc-300 dark:text-zinc-500 text-zinc-900 font-bold leading-4 cursor-pointer dark:hover:bg-zinc-900 hover:bg-zinc-200 rounded mr-1 mb-1"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from '@vue/reactivity'
import { useStore } from 'vuex'

const store = useStore()
/**
 * 展开状态切换
 */
const isOpenCategory = ref(false)

const triggerCategoryClick = (id) => {
  isOpenCategory.value = !isOpenCategory.value
}

/**
 * 选中状态切换
 */
// 选中状态维护到store中
const onCategoryClick = (item) => {
  store.commit('app/changeCurrentCategory', item)
}
</script>
<style lang="scss" scoped></style>
